<template>
  <div class="box">
    <div class="top">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="道路信息" name="a"></el-tab-pane>
        <el-tab-pane label="桥涵信息" name="b"></el-tab-pane>
        <el-tab-pane label="管廊信息" name="c"></el-tab-pane>
        <el-tab-pane label="专业工程信息" name="d"></el-tab-pane>
        <el-tab-pane label="投资信息" name="e"></el-tab-pane>
        <el-tab-pane label="资金信息" name="f"></el-tab-pane>
        <el-tab-pane label="企业信息" name="g"></el-tab-pane>
        <el-tab-pane label="协同大厅" name="h"></el-tab-pane>
      </el-tabs>
      <!-- <div class="img" v-show="showImages">
        <img src="@/assets/images/u87.svg" alt="" />
        <img src="@/assets/images/u86.svg" alt="" />
        <img src="@/assets/images/u88.svg" alt="" />
        <img src="@/assets/images/u89.svg" alt="" />
      </div> -->
    </div>
    <div class="content">
      <collaborativeHall v-if="activeName == 'h'" />
      <road v-if="activeName == 'a'" />
      <bridge v-if="activeName == 'b'" />
      <pipegallery v-if="activeName == 'c'" />
      <professional v-if="activeName == 'd'" />
      <investment v-if="activeName == 'e'" />
      <financial v-if="activeName == 'f'" />
      <information v-if="activeName == 'g'" />
    </div>
  </div>
</template>
<script>
import collaborativeHall from "./components/collaborativeHall.vue";
import road from "../../views/road/index.vue";
import bridge from "../bridge/index.vue";
import pipegallery from "../pipegallery/index.vue";
import professional from "../professional/index.vue";
import investment from "../investment/index.vue";
import financial from "../financial/index.vue";
import information from "../information/index.vue";
export default {
  components: {
    collaborativeHall, //协同大厅
    road, //道路信息
    bridge, //桥涵信息
    pipegallery, //管廊信息
    professional, //专业工程信息
    investment, //投资信息
    financial, //资金信息
    information, //企业信息
  },
  data() {
    return {
      activeName: "h",
      // showImages: false,
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
      // if (tab.name === "h") {
      //   this.showImages = false;
      // } else {
      //   this.showImages = true;
      // }
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  height: 100%;
  width: 100%;
  // padding: 15px;
  // box-sizing: border-box;
  .top {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      margin-right: 20px;
    }
  }
  .content {
    height: calc(100% - 60px);
    display: flex;
  }
}
</style>
